<template>
  <div>
    <el-button type="primary" style="margin-bottom: 10px" @click="addRow"> 新增分类 </el-button>
    <el-dialog v-model="dialogVisible" :title="id ? '修改分类':'新增分类'" :before-close="handleBeforeClose">
      <CategoryEdit ref="categoryRef" :id ='id' @success="editSuccess" ></CategoryEdit>
    </el-dialog>
    <!-- 分类管理表格 -->
    <el-table :data="tableData" border style="margin-bottom: 10px" row-key="id" default-expand-all>
      <el-table-column prop="name" label="类别名称" />
      <el-table-column label="分类级别">
        <template #default="{ row }">
          <span v-if="row.pid == 0">一级分类</span>
          <span v-else>二级分类</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="分类编号" />
      <el-table-column label="分类图片">
        <template #default="{ row }">
          <el-image
            v-if="row.picture !== ''"
            :src="row.picture"
            style="display: flex; align-items: center; height: 60px"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="warning" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="delRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getCategoryList, delCategory } from "../../api/api";
import { ElMessageBox,ElMessage } from 'element-plus';
import CategoryEdit from "../../components/CategoryEdit.vue";
const tableData = ref([]);
const dialogVisible =ref()
const id = ref(0)
const categoryRef = ref()
onMounted(() => {
  loadCategoryList();
});
const loadCategoryList = async () => {
  const data = await getCategoryList();
  tableData.value = convertToTree(data);
};

const convertToTree = (data) => {
  const treeDate = [];
  const map = {};
  for (const item of data) {
    map[item.id] = { ...item, children: [] };
  }
  for (const item of data) {
    const node = map[item.id];
    if (item.pid === 0) {
      treeDate.push(node);
    } else {
      const parent = map[item.pid];
      parent.children.push(node);
    }
  }
  return treeDate;
};

const delRow = async (row) => {
  if (row.pid == 0 && row.children.length != 0) {
    ElMessage({
      type: "warning",
      message: "该分类下有二级分类，不能删除",
    });
  } else {
    ElMessageBox.confirm("确认新增?", {
      showClose: false,
      closeOnClickModal: false,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(async () => {
        if (await delCategory({ id: row.id })) {
          loadCategoryList();
        }
      })
      .catch(() => {});
  }
};
const handleBeforeClose = () => {
  ElMessageBox.confirm('确定关闭对话框吗？', {
    showClose: false,
    closeOnClickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    dialogVisible.value = false
  }).catch(() => {})
}
const editRow = (row)=>{
  id.value = row.id
  dialogVisible.value = true
  if(categoryRef.value){
    categoryRef.value.resetF(row.id)
  }
}
const addRow = ()=>{
  id.value = 0
  dialogVisible.value = true
  if(categoryRef.value){
    categoryRef.value.resetF()
  }
}
const editSuccess = ()=>{
  dialogVisible.value = false
  loadCategoryList()
}
</script>
